<!DOCTYPE html>
<html>

<head>
    <title>Homepage</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: #00d2ff;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #3a7bd5, #00d2ff);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }

        header {
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        h1 {
            margin: 0;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li {
            display: inline;
        }

        a {
            color: #333;
            padding: 10px;
            text-decoration: none;
        }

        a:hover {
            background-color: #333;
            color: #fff;
        }

        main {
            margin: 20px;
        }

        button {
            display: block;
            margin: 20px auto;
            width: 700px;
            height: 150px;
            border-radius: 20px;
            font-size: 30px;
            background-color: black;
            border: none;
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: rgb(201, 186, 131);
        }



        #dialogue {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 900px;
            height: 600px;
            border-radius: 10px;
            transform: translateX(-50%) translateY(-50%);
            background: white;
            z-index: 999;
            padding: 20px;
            display: none;
        }

        #token_mes {
            height: 450px;
            color: rgb(0, 0, 0);
            font-size: 40px;
            font-weight: bold;
            text-align: center;
        }

        #close-btn {
            background-color: #3498db;
            width: 300px;
            height: 100px;
            color: #fff;
            line-height: 100px;
            border: none;
            border-radius: 5px;
            font-size: 40px;
            cursor: pointer;
        }

        #close-btn:hover {
            background-color: #00d2ff;
        }
    </style>
</head>

<body>
    <header>
        <h1>几种token情况的测试</h1>
    </header>
    <main>
        <button id="no-token">未登录-未获得Token值</button>
        <button id="short-token">短时间戳Token过期</button>
        <button id="long-token">长时间戳Token过期</button>
        <button id="expired-token">登录成功且token正常--普通用户申请超级用户权限</button>
        <button id="expired-token">登录成功且token正常--普通用户申请普通权限</button>
        <div id="dialogue">
            <div id="token_mes"></div>
            <button id="close-btn">关闭</button>
        </div>
    </main>
    <script>
        const dialogue = document.querySelector("#dialogue");
        const token_mes = document.querySelector("#token_mes");
        const close_btn = document.querySelector("#close-btn");

        close_btn.addEventListener("click", () => {
            dialogue.style.display = "none";
        })

        document.querySelector("#no-token").addEventListener("click", () => {
            token_mes.innerHTML = "本地无token, 请登录"
            dialogue.style.display = "block"
        })

        document.querySelector("#short-token").addEventListener("click", () => {
            fetch("http://localhost:5050/verify_token/", {
                method: "GET",
                headers: {
                    "X-Access-Token": localStorage.getItem("access_token"),
                    "X-Refresh-Token": localStorage.getItem("refresh_token")
                }
            }).then(res => res.json()).then(res => console.log(res))
        })

    </script>
</body>

</html>